<template>
  <van-notice-bar left-icon="volume-o" :scrollable="false">
    <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
      <van-swipe-item v-for="item in notice" :key="item.id">
        <div class="van-ellipsis" @click="viewDetail(item)">
          {{ item.post_title }}
        </div>
      </van-swipe-item>
    </van-swipe>
  </van-notice-bar>
</template>

<script>
import { Swipe, SwipeItem, NoticeBar } from 'vant'
import { mapActions } from 'vuex'
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [NoticeBar.name]: NoticeBar
  },
  data () {
    return {
      notice: []
    }
  },
  mounted () {
    this.getNotice({ type: 1 }).then((res) => {
      this.notice = res.data.list
    })
  },
  methods: {
    ...mapActions({
      getNotice: 'getNotice'
    }),
    viewDetail (item) {
      this.$router.push({
        name: 'common-article',
        params: {
          url: item.visit_url,
          title: item.post_title
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.van-notice-bar{
  margin-top: 15px;
  height: 42px;
  padding: 0 13px;
  background: #FFFFFF;
  border-radius: 12px;
  /deep/.van-icon{
    color: #3871F9;
  }
  .notice-swipe {
    height: 42px;
    line-height: 42px;
    font-size: 13px;
    font-weight: 400;
    color: #4A4A4A;
  }
}
 
</style>
